<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" lang="">
<head>
    <meta charset="utf-8" />
    <title>v-on:keydown</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--注意传入参数,是vue事件对象,和jq事件对象是一样的,因为vue基于jq开发-->
    <label>
        <input type="text" v-on:keydown="fun($event)">
    </label>
    <hr/>
    <label>
        <input type="text" onkeydown="showKeyCode()">
    </label>
</div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        methods:{
            /*这里的入参是js对象*/
            fun:function (event) {
                var keyCode = event.keyCode;
                if(keyCode < 48 || keyCode > 57){
                    event.preventDefault();
                }
            }
        }
    });
    /*传统js方法*/
    function showKeyCode() {
        /*获取点击键盘案件的事件*/
        var keyCode = event.keyCode;
        if (keyCode===13){
            alert("您输入的是回车键");
        }
        /*如果输入不是0-10,就阻止按键生效*/
        if(keyCode < 48 || keyCode > 57){
            event.preventDefault();
        }
    }
</script>
</html>